<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <style type="text/css">
    	#all{
    		margin: 40px auto;
    		width: 250px;
    		height: 300px;
    		border-radius: 5px;
    		background-color: #E6E6E6;
    		padding: 10px;
    	}
    	#all .show{
    		width: 250px;
    		height: 40px;
    		margin: 0px auto;
    		border-radius: 5px;
    		background-color: #AEAEAE;
    		margin-bottom: 10px;
    	}
    	#all .show span{
    		float: right;
    		font-size: 20px;
    		font-weight: 700;
    		margin-top: 5px;
    		overflow: hidden;
    	}
    	#all .num,#all .operator,#all .num,#all .ling,#all .dengyu,#all .del,#all .tui{
    		float: left;
    		margin:5px;
    		width: 50px;
    		height: 40px;
    	}    	
    </style>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    	var flat = 1;     //按过等于的标志位(就是判断是否要进行第二次运算)
		var opera = 1;	  //上一个按的是运算符的标志位
		var del_f = 1;	  //按过小数点的标志位

		//设置数字0~9的点击事件 
			$('#all .num').mouseup(function() {
				//进行新的运算点击数字 先将显示的内容置0
				if(!flat)$('#all .show span').html(0);
				//判断显示的内容是否只有0  只有0就将0替换成新的数字 
				if($('#all .show span').html() == "0")$('#all .show span').html($(this).val());
				else//不是只有0就追加点击的内容
					$('#all .show span').html($('#all .show span').html()+$(this).val());
				flat = 1;	//1为可以按等于按钮
				opera = 0;	//0为可以按运算符按钮
			});

			//设置运算符的点击事件 
			$('#all .operator').mouseup(function() {
				//判断在可以按等于按钮 并且 可以按运算符按钮的时候 (就是在计算的时候)
				if(flat&&(!opera))
					//在显示内容区域显示点击的运算符
					$('#all .show span').html($('#all .show span').html()+$(this).val());
				opera = 1;		//点击运算符后 运算符标志位为1 不可以点击
				del_f = 1;		//点击运算符后 小数点标志位为1 可以点击
			});
			// 为零的点击事件
			$('#all .ling').mouseup(function() {
				$('#all .show span').html(0);//显示内容设置0
				flat = 1;		//1为可以按等于按钮
				del_f = 1;		// 小数点标志位为1 可以点击
			});
			// 等于按钮的点击事件
			$('#all .dengyu').mouseup(function() {
				//eval是获取显示内容的字符串转换成js代码  显示内容转换成js代码就是一堆数字的运算 就出来等于的数字了  然后将 等数乘以100进行四舍五入取整 再除以100 就是只保留了两位小数
				$('#all .show span').html(Math.round(eval($('#all .show span').html())*100)/100);
				flat = 0;		//0为不可以按等于按钮
			});
			// 小数点的点击事件
		 $('#all .del').mouseup(function() {
		 	if(del_f)	//判断是否可以按等于按钮 当可以时在内容中追加'.'
			$('#all .show span').html($('#all .show span').html()+$(this).val());
			del_f = 0;
		 });
		 // 回退按钮的点击事件
		 $('#all .tui').mouseup(function() {
		 	//判断是否点击过等于按钮  点击过等于按钮  显示的内容就是等数 不可以回退 如果没点过就是在运算中 可以回退
		 	if(flat){
		 		//截取显示内容从0开始 到长度-1   不包括结尾 正好去掉了最后一位  再赋值到显示内容区域
				$('#all .show span').html($('#all .show span').html().slice(0,$(this).html().length-1));
				//判断新的显示内容是否为空  就是之前就是一位数 被回退删掉了  这样就赋值显示区域为0
				if($('#all .show span').html()=="")$('#all .show span').html(0);
				//获取显示区域内容的最后一位字符是什么 
				var z =$('#all .show span').html().charAt($('#all .show span').html().length - 1);
				//判断最后一位是不是运算符   如果是的话 就不让用户再次点击运算符  不是就可以点击 
				if(z == "+"||z == "-"||z == "*"||z == "/")
					opera = 1;  //设置不可以点击运算符
				else
					opera = 0;	//设置可以点击运算符
			}
		 });
    })

    </script>
    <title>计算器</title>
  </head>
 <body>
 	<div id="all">
 		<div class="show"><span><?php  ?></span></div>
 		<input type="button" class="num" value="1" />
		<input type="button" class="num" value="2" />
		<input type="button" class="num" value="3" />
		<input type="button" class="operator" value="+" />
		<input type="button" class="num" value="4" />
		<input type="button" class="num" value="5" />
		<input type="button" class="num" value="6" />
		<input type="button" class="operator" value="-" />
		<input type="button" class="num" value="7" />
		<input type="button" class="num" value="8" />
		<input type="button" class="num" value="9" />
		<input type="button" class="operator" value="*" />
		<input type="button" class="del" value="." />
		<input type="button" class="num" value="0" />
		<input type="button" class="dengyu" value="=" />
		<input type="button" class="operator" value="/" />
		<input type="button" class="ling" value="C" />
		<input type="button" class="tui" value="←" />
 	</div>
	
 </body>
</html>